<template>
  <view class="theme-item">
    <navigator :url="`/pages/classlist/classlist?id=${item._id}&name=${item.name}`" class="box" v-if="!isMore">
      <image class="pic" :src="item.picurl" mode="aspectFill"></image>
      <view class="mask">{{item.name}}</view>
      <view class="tab" v-if="!updateTimeDesc">{{updateTimeDesc}}前更新</view>
    </navigator>

    <navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-else>
      <image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
      <view class="mask">
        <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
        <view class="text">更多</view>
      </view>
    </navigator>
  </view>
</template>

<script setup>
  import { computed } from 'vue'
  import { compareTimestamp } from '@/utils/common.js'
  const props = defineProps({
    item: {
      type: Object,
      default () {
        return {
          name: '默认名称',
          picurl: '',
          updateTime: Date.now() - 1000 * 60 * 60 * 5,
        }
      }
    },
    isMore: {
      type: Boolean,
      default: false
    }
  })


  const updateTimeDesc = computed(() => {
    return compareTimestamp(props.item.updateTime)
  })
</script>

<style lang="scss" scoped>
  .theme-item {
    .box {
      height: 340rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;

      .pic {
        width: 100%;
        height: 100%;
      }

      .mask {
        width: 100%;
        height: 70rpx;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(20rpx);
        font-size: 30rpx;
        font-weight: 600;
      }

      .tab {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(250, 129, 90, 0.7);
        backdrop-filter: blur(20rpx);
        color: #fff;
        font-size: 22rpx;
        padding: 6rpx 14rpx;
        border-radius: 0 0 20rpx 0;
        transform: scale(0.8);
        transform-origin: left top;
      }
    }

    .box.more {
      .mask {
        width: 100%;
        height: 100%;
        flex-direction: column;

        .text {
          font-size: 28rpx;
        }
      }
    }
  }
</style>